@(house: House, houseForm: Form[HouseForm])(implicit lang: Lang)

@import helper._

@main("The Cult Cinema Inc. Movie"){

	<section style="padding-top:60px">
				<div class="row">
					<div class="span12">
						<ul class="breadcrumb">
							<li><a href="@routes.Application.index(lang.code)">@Messages("home")(lang)</a> <span class="divider">/</span></li>
							<li><a href="@routes.Staff.houseManager(lang.code)">@Messages("staff.house.manage")(lang)</a> <span class="divider">/</span></li>
		        			<li class="active">@Messages("movie.house", house.id)(lang)</li>
		        		</ul>
					</div>
				</div>

				@if(houseForm.hasErrors) {
					<div class="row">
						<div class="span12">
				    	    <div class="alert-error alert alert-block">
				    	    	<h4 class="alert-heading">@Messages("error")(lang)
					    	    	@if(houseForm.hasGlobalErrors) { # @Messages(houseForm.globalError.message)(lang) }
				    	    	</h4>
					    	</div>
						</div>
					</div>
				}

				<div class="row">

					<div class="span12">

							<div class="row">
								<div class="span7 well">
									@movie.seat(0, house)(lang)
								</div>
								<div class="span4 well" style="padding-top:20px;">
									<h4>@Messages("movie.house", house.id)(lang)</h4>
									@helper.form(action = routes.Staff.editHouse, 'class -> "form-search") {
										<table class="table">
											<thead>
												<tr>
													<th width="30%">@Messages("staff.house.size")(lang)</th>
													<th width="70%">@Messages("staff.house.capacity")(lang)</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>@(house.row1+house.row2+house.row3) x @(house.col1+house.col2+house.col3)</td>
													<td>@((house.row1+house.row2+house.row3)*(house.col1+house.col2+house.col3))
														(-@house.seats.size())</td>

												</tr>
											</tbody>
										</table>
										<input type="hidden" name="house" value="@house.id" />
										<input type="hidden" name="language" value="@lang.code" />
										<input type="hidden" id="seats" name="seats" value="@houseForm("seats").valueOr("")">
										<button id="saveEdit" type="submit" class="btn btn-success btn-block" disabled="disabled"><i class="icon-ok"></i> @Messages("staff.house.save")(lang)</button>
									}



								</div>
							</div>
						</div>

				</div>
  			</section>
  			<script>
				$(function(){

					$.blockUI({ css: {
			            border: 'none',
			            padding: '15px',
			            backgroundColor: '#000',
			            '-webkit-border-radius': '10px',
			            '-moz-border-radius': '10px',
			            opacity: .5,
			            color: '#fff'
			        } });

					$.get("@routes.Staff.checkSeat(house.id)", function(data) {
						var unavailable = data.unavailable;

						for(var i=0;i<unavailable.length;i++){
							$("[data-seat="+unavailable[i]+"]").addClass("null");
						}

						$("input#seats").val(unavailable.join(':'));

						$('td.seat:not(.demo):not(.demo-description)').click(function(e){

							$(e.currentTarget).toggleClass("null");

							var seats = new Array();
							$("td.seat.null").each(function(){
								seats.push($(this).data("seat"));
							});

							$("input#seats").val(seats.join(':'));

							if($("input#seats").val() == unavailable.join(':')){
								$("button#saveEdit").attr("disabled",true);
							} else {
								$("button#saveEdit").attr("disabled",false);
							}

						});

						$.unblockUI();
					});

				});
		</script>


}(lang)
